<!-- 网格盒子 -->
<!--
  listView: 是否列表视图 ,默认矩阵模式
  name:文件名称
  type: 图表类型 folder(文件夹)、 word、 excel、 ppt
  net: 是否有网络，boolean,
  cache: 是否有本地cache
  percentage: 上传进度（1-100），此时文件图标会透明
  syn: 是否在同步编辑
  reName:重命名，此值只要变化就可以
 -->
<template>
  <div class='gridBox'
       :title="item.name"
       @contextmenu.prevent.stop="contextmenu">
       <div class="pointer">
       <!-- TODO 目前先不加断网状态 -->
    <!-- <div :class="item.net||item.isCache?'pointer':'opacity'"> -->
      <div :class="listView?'grid-app-list':'grid-app'">
        <div class="image"
             @dblclick.stop="dblclickIconHandle"
             :class="item.percentage?'opacity':''">
          <img v-if="item.type!=='image'"
               :src="MY_URL[item.type]"
               alt="">
          <img v-else
               :src="item.url"
               alt="">
        </div>
        <el-input v-show="rename"
                  v-model="inName"
                  ref="myInput"
                  maxlength="20"
                  @blur="handleBlur"
                  @keyup.enter.native="$event.target.blur"></el-input>
        <p v-show="!rename"
           @dblclick.stop="handleRename">{{item.label}}</p>
        <div v-if="item.percentage && item.percentage!=100"
             class="progress-bar">
          <!--          <el-progress :percentage="item.percentage"
                       :show-text="false"></el-progress>-->
        </div>
        <div class="state-box fc">
          <div v-if="item.syn && !item.percentage && !item.isDone"
               class="fc"
               :class="item.net?'':'opacity'">
            <img src="../../static/svg/upload.svg"
                 alt="">
            <p style="width:30px">同步</p>
          </div>
          <div v-if="item.isDone"
               class="fc">
            <img src="@/static/svg/complete.svg"
                 alt="">
            <p style="width:30px">完成</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { MY_URL } from '@/utils/constants';
import { hasName } from '@/utils/public';

export default {
  components: {},
  data() {
    return {
      MY_URL,
      // isDone: this.item.isDone,
      inName: '',
      rename: false,
      nameVal: '',
    };
  },
  props: {
    item: {
      type: Object,
    },
    index: {

    },
    listView: {

    },
    id: {

    },
    list: {

    },
  },
  created() {

  },
  mounted() {
  },
  updated() {

  },
  computed: {},
  watch: {
    /* percentage: {
      handler(newVal, oldVal) {
        if (newVal == 100) {
          this.isDone = true
        }
        setTimeout(() => {
          this.isDone = false
        }, 2000);
      },
    }, */
    // 'item.reName': { //  reName 只要变化就可以重命名
    //   handler(newVal, oldVal) {
    //     if (newVal) {
    //       this.rename = true
    //     }
    //   },
    //   deep: true
    // },
    id: { //  id 只要变化就可以重命名
      handler(newVal) {
        if (newVal === 0) {
          this.rename = true;
        }
      },
    },
    rename: {
      handler(newVal) {
        if (newVal) {
          this.inName = this.item.name;
          this.$nextTick(() => {
            this.$refs.myInput.focus();
            this.$refs.myInput.select();
          });
        }
      },
    },
  },
  methods: {
    contextmenu(event) {
      this.$emit('diycontextmenu', { item: this.item, index: this.index, val: event });
    },
    handleBlur() {
      const reg = /^\s*$/g;
      if (this.list) {
        const list = this.list.filter((item) => item !== this.item);
        if (hasName(list, { name: this.inName, type: this.item.type })) {
          const type = this.$t(this.item.type);
          this.$alert(this.$t('same name', { msg: type }), this.$t('rename error'), {
            confirmButtonText: this.$t('sure'),
            type: 'warning',
            showClose: false,
          }).then(() => {
            this.$nextTick(() => {
              this.$refs.myInput.focus();
              this.$refs.myInput.select();
            });
          });
        }
      }

      if (reg.test(this.inName)) {
        this.inName = this.item.name;
      }
      this.$emit('change', { name: this.inName, type: this.item.type });
      this.rename = false;
      // this.item.name = this.inName;
      this.rename = false;
    },
    handleRename() {
      this.rename = true;
      // this.inName = this.item.name
    },
    dblclickIconHandle() {
      this.$emit('dblclickIcon', this.item);
    },
  },
};
</script>
<style lang='scss' scoped>
.gridBox {
  display: inline-block;
  .grid-app {
    width: 120px;
    max-height: 130px;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;

    .image {
      width: 50px;
      margin-bottom: 2px;
      padding: 10px;
      & img {
        height: 37px;
      }
    }
    p {
      max-height: 38px;
      padding: 5px 10px;
      padding-bottom: 0;
      margin-bottom: 5px;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }
  .grid-app-list {
    width: 100%;
    height: 40px;
    display: flex;
    justify-items: center;
    align-items: center;

    & .image {
      width: 50px;
      & img {
        height: 18px;
      }
    }
    & p {
      padding: 0 20px 0 10px;
    }
  }
  .pointer {
    cursor: pointer;
  }
  // .pointer:hover {
  //   .image {
  //     transition: all 0.2s;
  //     background: #e2f2ff;
  //     border-radius: 4px;
  //   }
  //   p {
  //     transition: all 0.2s;
  //     background: #e2f2ff;
  //     border-radius: 4px;
  //   }
  //   .state-box p {
  //     transition: all 0.2s;
  //     background: transparent;
  //   }
  // }
  .opacity {
    opacity: 0.4;
  }
  .progress-bar {
    margin-top: 9px;
    width: 60px;
  }
  .progress-bar /deep/ .el-progress-bar__inner {
    height: 4px;
  }
  .progress-bar /deep/ .el-progress-bar__outer {
    width: 60px;
    height: 4px !important;
  }
  .state-box {
    & img {
      width: 16px;
    }
    & p {
      font-size: 12px;
    }
  }
}
.grid-app /deep/ .el-input__inner {
  height: 30px;
  padding: 0 5px;
}
.grid-app-list /deep/ .el-input__inner {
  width: 150px;
  height: 30px;
  padding: 0 5px;
}
</style>
